<template>
  <div class="library-wrap">
    <div class="library-navwrap">
      <header class="library-header">
        <router-link :to="{ name: 'personalAdvice' }">个性推荐</router-link>
        <router-link :to="{ name: 'songList' }">歌单</router-link>
        <router-link :to="{ name: 'list' }">排行榜</router-link>
      </header>
    </div>
    <router-view class="library-view"></router-view>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Router from "vue-router";

@Component({})
export default class MusicLibraryComponent extends Vue {
  $router: Router;

  toPersonalAdvice() {
    this.$router.push({ name: "personalAdvice" }).catch((err) => err);
  }
  toSongList() {
    this.$router.push({ name: "songList" }).catch((err) => err);
  }
  toList() {
    this.$router.push({ name: "list" }).catch((err) => err);
  }
}
</script>

<style lang="scss" scoped>
.library-wrap {
  font-size: 0.14rem;
  .library-navwrap {
    position: fixed;
    top: 1rem;
    width: 100%;
    z-index: 999;
    .library-header {
      display: flex;
      height: 0.8rem;
      line-height: 0.4rem;
      background-color: #fcfdfd;
      color: #666;
      font-size: 0.18rem;
      > a {
        flex: 1;
        color: #666;
        line-height: 0.8rem;
        text-align: center;
      }
      .router-link-active {
        color: #df2d2d;
        text-decoration: none;
        border-bottom: 2px solid #df2d2d;
      }
    }
  }
  .library-view {
    margin-top: 1.8rem;
  }
}
</style>
